<template>
	<div class="whole">
		<div class="dia" style="width: 100%;background-color: #fff;">
			<van-search v-model="agentName" placeholder="请输入代理商名称或者手机号" shape="round" :show-action="showAction" class="search"
				 @clear="onSearch">
			</van-search>
			<div class="increased" @click="additional(1)" v-if="agentName==''">
				新增
			</div>
			<div class="increased" @click="onSearch" v-else>
				搜索
			</div>
		</div>
		<div class="wrapperCenter">
			<div class="content">
				<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList">
					<empty v-if="!list.length"></empty>
					<div class="dis" v-for="(item,index) in list" :key="index">
						<div class="main" :class="index!=0?'main_top':''">
							<div class="main_d">
								<div class="dia"
									style="width: 100%;display: flex;align-items: center;justify-content: space-between;">
									<div class="dia">
										<img src="@/assets/terminal/logo_img.png" alt="" />
										<div class="institution">
											{{item.agentName}}
										</div>
										<div class="condition" v-if="item.isDirect==0">
											{{item.agentPhoneNo}}
										</div>
										<div class="condition" v-else>
											{{item.agentPhoneNo.slice(0,4)}}***{{item.agentPhoneNo.slice(-4)}}
										</div>
									</div>
									<div class="dia" v-if="item.isDirect==0">
										<!-- <div class="condition_a dia" @click="navUrl('/liberal',item)">
											<div class="">
												开通渠道
											</div>
											<div class="">
												<img src="@/assets/terminal/arrow_right.png" alt="" />
											</div>
										</div> -->
										<div class="condition_a dia" @click="navUrl('/liberal',item)">
											<div class="">
												成本配置
											</div>
											<div class="">
												<img src="@/assets/terminal/arrow_right.png" alt="" />
											</div>
										</div>
									</div>
									
								</div>

							</div>
							
							<div class="main_footer">
								<div class="dia " style="justify-content: space-between;">
									<div class="">
										月交易：{{item.monthAmount}}
									</div>
									<div class="">
										总交易：{{item.totalAmount}}
									</div>
								</div>
								<!-- <div class="dia main_tenant" style="justify-content: space-between;">
									<div class="">
										月交易：1
									</div>
									<div class="">
										总交易：{{item.totalAmount}}
									</div>
								</div> -->
							</div>
							<div class="line">
							
							</div>
							<div class="dis statistics" @click="navUrl('/checkStatistics',item)">
								查看统计
							</div>
						</div>
					</div>
				</van-list>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		selectUnderAllAgentList
	} from '@/api/terminal'
	import store from '@/store'
	import {
		showToast,
		showConfirmDialog
	} from 'vant'
	export default defineComponent({
		name: 'sateActive',
		setup() {
			const router = useRoute()
			const routers = useRouter()
			const state = reactive({
				pageStart: 1,
				pageSize: 10,
				loading: false,
				finished: false,
				list: [],
				showAction: false,
				agentName: ""
			})
			const onSearch = () => {
				state.pageStart = 1
				state.list = []
				getList()
			}
			//新增代理商
			const additional = () => {
				
				routers.push({
					path: "/share",
					query:{
						invitation:1
					}
				})
			}
			const navUrl= (e,item) =>{
				// console.log(store.state.user.agentNo,item.agentNo)
				// return
				routers.push({
					path:e,
					query:{
						serviceNo:item.agentNo,
						parentNo:store.state.user.agentNo
					}
				})
			}
			//
			// const search = () => {
			// 	if (state.agentName == '') {
			// 		state.pageStart = 1
			// 		state.loading=true
			// 		state.finished=true
			// 		getList()
			// 	}
			// }
			//获取数据
			const getList = () => {
				state.terList = router.query.terList
				let parames = {
					parentNo: store.state.user.agentNo,
					pageStart: state.pageStart,
					pageSize: state.pageSize
				}
				let agentName = {
					agentName: state.agentName
				}
				console.log(state.agentName)
				if (state.agentName != '') {
					Object.assign(parames,agentName)
					// parames.agentName = state.agentName
				}
				selectUnderAllAgentList(
					parames
				).then(res => {
					if (res.data.records.length != 0) {
						if (res.data.records.length < 10) {
							state.finished = true
							state.loading = false
						} else {
							state.pageStart++
							state.finished = false
							state.loading = false
						}
						state.list = state.list.concat(res.data.records)
					} else {
						state.finished = true
						state.loading = false
					}

				})
			}
			return {
				...toRefs(state),
				getList,
				onSearch,
				additional,
				navUrl
			}
		}
	})
</script>
<style scoped lang="scss">
	.whole {
		height: 100vh;
		background-color: #FFF9F9;
		overflow-y: auto;

		.search {
			width: 328px;
			// position: fixed;
			// top: 0;
		}

		.increased {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 14px;
			color: #FF5A3D;
		}

		.wrapperCenter {
			height: 100vh;
			overflow: scroll;

			.content {

				// padding: 0 10px;
				// padding-bottom:50px;
				// box-sizing: border-box;
				.main {
					width: 339px;
					// height: 46px;
					background: #FFFFFF;
					box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
					border-radius: 6px;
					padding: 10px 10px;
					box-sizing: border-box;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 12px;
					color: #333333;
					margin-top: 12px;

					img {
						width: 23px;
						height: 23px;
						border-radius: 6px;
					}

					.main_d {
						// width: 280px;
						display: flex;
						justify-content: space-between;

					}

					.line {
						width: 100%;
						border-bottom: 1px solid #f3f3f3;
						margin-top: 12px;
					}
					.statistics{
						padding-top: 12px;
						box-sizing: border-box;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 14px;
						color: #FF2828;
					}
					.main_footer {
						margin-top: 12px;
						background: #FFF9F9;
						width: 100%;
						padding: 7px 25px;
						box-sizing: border-box;

						.main_tenant {
							margin-top: 14px;
						}
					}

					.institution {
						width: 40px;
						margin-left: 12px;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.condition_a {
						color: #74A2FF;
						border-radius: 14px;

						img {
							width: 14px;
							height: 14px;
							margin-left: 1px;
						}
					}

					.condition {
						// margin-top: 4px;
						margin-left: 0px;
					}
				}
			}
		}

	}

	::v-deep .van-search__content {
		background-color: #FFECEC !important;
	}
</style>